class List{
    constructor(){
        // 后面ajax需要所以补上来的
        this.url = "http://localhost:3000/api"
        this.cont = document.querySelector(".cont")
        this.load()
        // 1. 绑定事件
        this.addEvent()
    }
    addEvent(){
        const that = this
        // 利用事件委托，绑定添加购物车的点击事件
        this.cont.addEventListener("click",function(eve){
            const e = eve || window.event
            const target = e.target || e.srcElement
            // 2. 获取当前商品的id
            if(target.className === "add"){
                that.id = target.parentNode.getAttribute("index")  //tr身上的index
                that.setLocal()
            }
             // 3. 将数据存到本地存储中-->存进去-->取用
        })
    }
    setLocal(){
        // 设定的数据的格式
        // 先读
        // console.log(JSON.parse(localStorage.getItem("goods")))            //id num存进去的直接是数组里放对象
        const goods = localStorage.getItem("goods") ? JSON.parse(localStorage.getItem("goods")) : []
        // 判断是否是第一次添加购物车
        if(goods.length<1){
            norender()
         // 第一次加入购物车：直接添加数据
            goods.push({
                id:this.id,
                num:1
            })
        }else{
            // 不是第一次加入购物车：
            // 遍历
            let i = 0
            const flag = goods.some((val,idx)=>{      //找到对应的商品
                i = idx                               //把序列保存出去
                return val.id === this.id             //保存到flag上
            })
            // 判断本次添加的是否是新商品
            if(flag){
                //如果有对应的商品,说明是是老商品：增加指定商品的数量
                goods[i].num ++
            }else{
                // 不是老商品：增加数据
                goods.push({
                    id:this.id,
                    num:1
                })
            }
        }
         // 再存回去
        localStorage.setItem("goods",JSON.stringify(goods))
    }
    load(){
        ajax({
            url:this.url,
            data:{
                type:"getGoods"
            },
            success:res=>{
                // res直接拿过来是JSON数据
                this.res=JSON.parse(res).msg
                this.render()
            }
        })
    }
    render(){
        let str = ""
        this.res.forEach(val=>{
            str+=`<a href="#"><div class="box" index="${val.proId}">   
                    <div class="pic">
                        <img src="${val.img}" alt="">
                        <p class="nostorage">${val.storage}</p>
                    </div>
                    <div class="info">
                        <p class="name">${val.proName}</p>
                        
                        <span>${val.price}</span>
                    </div>
                    <input type="button" class="add" value="加入购物车">
                </div></a>`
        })
        this.cont.innerHTML = str
    }
}
new List()